<template>
	<view>
		<view class="search1" >
			<view class="hot">热门搜索</view>
			<view class="smallHotBox">
				<!-- <navigator url="../Search-ok
				/Search-ok
				.vue"> -->
					<view v-for="(v,index) in hotArray" :key="v.id" @click="toDetails(v.id)">
						<text class="smallHot">{{v.coursename}}</text>
					</view>
				<!-- </navigator> -->
			</view>
		</view>
		<BottomText></BottomText>
	</view>
</template>

<script lang="ts" setup>
import http from '@/utils/http.js';
import BottomText from '@/components/BottomText/BottomText.vue'
import {ref,onMounted} from 'vue';

//渲染
let page=ref(1)
let limit=ref(5)
let total=ref(0)
let hotArray=ref([]);
let histories=ref([]);
let getData=function(){
	http({
	    url:'/course/list',
		method:'get',
		params: {
		    page: page.value,
			limit: limit.value
			}
	}).then((data)=>{
		//console.log(data)
		if (data.code == 0) {
			hotArray.value= data.data.list
		    //console.log(hotArray)
			total.value = data.data.totalCount
			//console.log(total.value)
		    }
	})
}
//跳转传参
let toDetails=function(id){
	uni.navigateTo({
		url:`/pages/courseDetail/courseDetail?id=${id}`
	})
	console.log(id)
}
//挂载后
onMounted(()=>{
	getData()
})
</script>

<style lang="less" scoped>
	@import url('../../static/iconfont-J/iconfont.css');
.search1{
		border-bottom: 1px solid #faf9f9;
		padding: 0 42rpx;
		.hot{
			font-size: 26rpx;
			color: #252525;
			margin-bottom: 40rpx;
			margin-top: 22rpx;
			display: flex;
			justify-content: space-between;
			image{
				width: 28rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
		.smallHotBox{
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			view{
				margin-bottom: 34rpx;
				padding-right: 40rpx;
				.smallHot{
					height: 48rpx;
					background-color: #f6f8ff;
					font-size: 22rpx;
					color: #0e66fe;
					line-height: 48rpx;
					padding: 12rpx 38rpx;
					border-radius: 50px;
					
				}
			}
		}
	}
</style>